/*
 * @Author: shawnxiao
 * @Date: 2021-10-15 15:04:20
 * @LastEditTime: 2021-11-16 17:59:47
 * @FilePath: /gatt-react/src/index/views/Home/components/GattDrag/index.tsx
 */
import React, {useState, useRef, useEffect} from 'react'
import './index.less'
import { PlusOutlined } from '@ant-design/icons'
import { Button } from 'antd'
import GattDate from './components/GattDate/index'
import GattTree from './components/GattTree'
import AddDrawer from './components/AddDrawer'

export interface gattItemBaseParams {
  name: string
  type: string
  planTime:number[]
  stoneTime:number|string
  startTime:number
  endTime:number
  id:string
  per:number
  popUpParams: any
  parentId: string | number
  expand?:boolean
  isShow?:boolean
  perBgColor?:string
  perProcessColor?:string
}
export interface gattItemParams extends gattItemBaseParams {
  top:number
  left:number
  widthMe:number
  widthChild:number
}

function GattDrag() {
  const startTime = 1600473600000 // 整体开始时间
  const endTime = 1600473600000 // 整体结束时间
  const list:gattItemBaseParams[] = [
    {
      // 名称
      name: '根级',
      // 项目类型 1=> 里程碑 2=>计划项目 3=> 分组
      type: '3',
      // 计划周期 2020-01-02 00:00 - 2020-03-06 00:00
      planTime: [1577894400000, 1583424000000],
      // 里程碑时间
      stoneTime: '',
      // 甘特图整个日历开始时间
      startTime: 1577894400000,
      // 甘特图整个日历结束时间
      endTime: 1583424000000,
      id: '0-0-0',
      // 展开与否
      expand: true,
      // 显示与否
      isShow: true,
      per: 30,
      // 自定义进度背景色 比fieldsAttr里的颜色配置选项优先级高
      perBgColor: '#e4e7ed',
      // 自定义进度色 比fieldsAttr里的颜色配置选项优先级高
      perProcessColor: '#13587e',
      // 弹窗配置项
      popUpParams: {
        name: '根级',
        startTime: '2020-01-02 00:00',
        endTime: '2020-03-06 00:00',
        // 出租率
        per: '50%'
      },
      // 父级id
      parentId: ''
    },
    {
      // 名称
      name: '根子级',
      // 项目类型 1=> 里程碑 2=>计划项目 3=> 分组
      type: '3',
      // 计划周期 2020-01-02 00:00 - 2020-02-06 00:00
      planTime: [1577894400000, 1580918400000],
      // 里程碑时间
      stoneTime: '',
      // 甘特图整个日历开始时间
      startTime: 1577894400000,
      // 甘特图整个日历结束时间
      endTime: 1580918400000,
      id: '0-1-0',
      // 展开与否
      expand: true,
      // 显示与否
      isShow: true,
      per: 50,
      // 自定义进度背景色
      perBgColor: '#e4e7ed',
      // 自定义进度色
      perProcessColor: '#13587e',
      // 弹窗配置项
      popUpParams: {
        name: '根子级',
        startTime: '2020-01-02 00:00',
        endTime: '2020-02-06 00:00',
        // 出租率
        per: '50%'
      },
      // 父级id
      parentId: '0-0-0'
    },
    {
      // 名称
      name: '根子孙级',
      // 项目类型 1=> 里程碑 2=>计划项目 3=> 分组
      type: '2',
      // 计划周期 2020-01-02 00:00 - 2020-02-01 00:00
      planTime: [1577894400000, 1580486400000],
      // 里程碑时间
      stoneTime: '',
      // 甘特图整个日历开始时间
      startTime: 1577894400000,
      // 甘特图整个日历结束时间
      endTime: 1580486400000,
      id: '0-1-1',
      // 展开与否
      expand: true,
      // 显示与否
      isShow: true,
      per: 50,
      // 自定义进度背景色
      perBgColor: '#e4e7ed',
      // 自定义进度色
      perProcessColor: '#13587e',
      // 弹窗配置项
      popUpParams: {
        name: '根子孙级',
        startTime: '2020/01/02 00:00',
        endTime: '2020/01/31 24:00',
        // 出租率
        per: '50%'
      },
      // 父级id
      parentId: '0-1-0'
    },
    {
      // 名称
      name: '根子孙级',
      // 项目类型 1=> 里程碑 2=>计划项目 3=> 分组
      type: '2',
      // 计划周期 2020-02-01 00:00 - 2020-02-06 00:00
      planTime: [1580486400000, 1580918400000],
      // 里程碑时间
      stoneTime: '',
      // 甘特图整个日历开始时间
      startTime: 1580486400000,
      // 甘特图整个日历结束时间
      endTime: 1580918400000,
      id: '0-1-2',
      // 展开与否
      expand: true,
      // 显示与否
      isShow: true,
      per: 50,
      // 自定义进度背景色
      perBgColor: '#e4e7ed',
      // 自定义进度色
      perProcessColor: '#13587e',
      // 弹窗配置项
      popUpParams: {
        name: '根子孙级',
        startTime: '2020-02-01 00:00',
        endTime: '2020-02-06 00:00',
        // 出租率
        per: '50%'
      },
      // 父级id
      parentId: '0-1-0'
    },
    {
      // 名称
      name: '里程碑',
      // 项目类型 1=> 里程碑 2=>计划项目 3=> 分组
      type: '1',
      // 计划周期 2020-02-06 00:00 - 2020-02-07 00:00
      planTime: [1580918400000, 1581004800000],
      // 里程碑时间
      stoneTime: 1580918400000,
      // 甘特图整个日历开始时间
      startTime: 1580918400000,
      // 甘特图整个日历结束时间
      endTime: 1581004800000,
      id: '0-2-0',
      // 展开与否
      expand: true,
      // 显示与否
      isShow: true,
      per: 100,
      // 自定义进度背景色
      perBgColor: '#e4e7ed',
      // 自定义进度色
      perProcessColor: '#13587e',
      // 弹窗配置项
      popUpParams: {
        name: '里程碑',
        startTime: '2020-02-06 00:00',
        endTime: '2020-02-07 00:00'
      },
      // 父级id
      parentId: '0-0-0'
    },
    {
      // 名称
      name: '根子级',
      // 项目类型 1=> 里程碑 2=>计划项目 3=> 分组
      type: '2',
      // 计划周期 2020-02-07 00:00 - 2020/03/06 00:00
      planTime: [1581004800000, 1583424000000],
      // 里程碑时间
      stoneTime: '',
      // 甘特图整个日历开始时间
      startTime: 1581004800000,
      // 甘特图整个日历结束时间
      endTime: 1583424000000,
      id: '0-3-0',
      // 展开与否
      expand: true,
      // 显示与否
      isShow: true,
      per: 10,
      // 自定义进度背景色 优先级最高
      // perBgColor: '#e4e7ed',
      // 自定义进度色 优先级最高
      // perProcessColor: '#13587e',
      // 弹窗配置项
      popUpParams: {
        name: '根子级',
        startTime: '2020-02-07 00:00',
        endTime: '2020/03/06 00:00',
        // 出租率
        per: '10%'
      },
      // 父级id
      parentId: '0-0-0'
    },
    {
      // 名称
      name: '根级2',
      // 项目类型 1=> 里程碑 2=>计划项目 3=> 分组
      type: '3',
      // 计划周期 2020/01/10 00:00 - 2020/04/15 24:00
      planTime: [1578585600000, 1586966400000],
      // 里程碑时间
      stoneTime: '',
      // 甘特图整个日历开始时间
      startTime: 1578585600000,
      // 甘特图整个日历结束时间
      endTime: 1586966400000,
      id: '1-0-0',
      // 展开与否
      expand: true,
      // 显示与否
      isShow: true,
      per: 15,
      // 自定义进度背景色
      // perBgColor: '#e4e7ed',
      // 自定义进度色
      // perProcessColor: '#13587e',
      // 弹窗配置项
      popUpParams: {
      },
      // 父级id
      parentId: ''
    },
    {
      // 名称
      name: '根级3',
      // 项目类型 1=> 里程碑 2=>计划项目 3=> 分组
      type: '3',
      // 计划周期 2020/01/10 00:00 - 2020/04/15 24:00
      planTime: [1578585600000, 1586966400000],
      // 里程碑时间
      stoneTime: '',
      // 甘特图整个日历开始时间
      startTime: 1578585600000,
      // 甘特图整个日历结束时间
      endTime: 1586966400000,
      id: '3-0-0',
      // 展开与否
      expand: true,
      // 显示与否
      isShow: true,
      per: 15,
      // 自定义进度背景色
      // perBgColor: '#e4e7ed',
      // 自定义进度色
      // perProcessColor: '#13587e',
      // 弹窗配置项
      popUpParams: {
      },
      // 父级id
      parentId: ''
    },
    {
      // 名称
      name: '根级4',
      // 项目类型 1=> 里程碑 2=>计划项目 3=> 分组
      type: '3',
      // 计划周期 2020/01/10 00:00 - 2020/04/15 24:00
      planTime: [1578585600000, 1586966400000],
      // 里程碑时间
      stoneTime: '',
      // 甘特图整个日历开始时间
      startTime: 1578585600000,
      // 甘特图整个日历结束时间
      endTime: 1586966400000,
      id: '4-0-0',
      // 展开与否
      expand: true,
      // 显示与否
      isShow: true,
      per: 15,
      // 自定义进度背景色
      // perBgColor: '#e4e7ed',
      // 自定义进度色
      // perProcessColor: '#13587e',
      // 弹窗配置项
      popUpParams: {
      },
      // 父级id
      parentId: ''
    },
    {
      // 名称
      name: '根级5',
      // 项目类型 1=> 里程碑 2=>计划项目 3=> 分组
      type: '3',
      // 计划周期 2020/01/10 00:00 - 2020/04/15 24:00
      planTime: [1578585600000, 1586966400000],
      // 里程碑时间
      stoneTime: '',
      // 甘特图整个日历开始时间
      startTime: 1578585600000,
      // 甘特图整个日历结束时间
      endTime: 1586966400000,
      id: '5-0-0',
      // 展开与否
      expand: true,
      // 显示与否
      isShow: true,
      per: 15,
      // 自定义进度背景色
      // perBgColor: '#e4e7ed',
      // 自定义进度色
      // perProcessColor: '#13587e',
      // 弹窗配置项
      popUpParams: {
      },
      // 父级id
      parentId: ''
    }
  ]
  // 字段属性
  const fieldsAttrTmp:any = {
    name: {
      label: '名称',
      showTable: true, // 是否于表格中显示该字段所在列
      showToast: true, // 是否于浮窗内显示该字段
      width: '150px', // 可选
      resizable: true // 可选
    },
    ower: { label: '负责人', showTable: true, showToast: false },
    type: { label: '类型', showTable: false, showToast: false },
    per: {
      label: '进度',
      showTable: true,
      showToast: true,
      // 设置进度阶段的颜色(可选)
      processColors: { 10: '#be2e55', 20: '#409eff', 50: '#13587e', 100: '#3eb88d' },
      // 连线选项背景色(可选)
      bgColor: '#e4e7ed'
    },
    startTime: { label: '开始时间', showTable: false, showToast: true },
    endTime: { label: '结束时间', showTable: false, showToast: true }
  }
  // leftMenu的右侧伸缩线
  const [rightLineX, setRightLineX] = useState(300)
  const [widthRight, setWidthRight] = useState(0)
  const rightLineRef = useRef<any>(null)
  const rootRef = useRef<any>(null)
  const [fieldsAttr, setFieldsAttr] = useState<any>(fieldsAttrTmp)
  const [dataArr, setDataArr] = useState<any[]>(list)
  const [visibleDrawer, setVisibleDrawer] = useState<boolean>(false)

  //  左边宽度设置
  const rightLineMousedown = (e:any) => {
    const cx = e.clientX
    // eslint-disable-next-line init-declarations
    let result:number
    document.onmousemove = event => {
      result = event.clientX - cx
      if (cx + result <= 300) return
      rightLineRef.current.style.left = cx + result + 'px'
    }
    document.onmouseup = () => {
      document.onmousemove = document.onmouseup = null
      if (cx + result <= 300) {
        setRightLineX(300)
        return
      }
      setRightLineX(cx + result)
    }
  }
  useEffect(() => {
    const width = rootRef.current.clientWidth - rightLineX - 2
    setWidthRight(width)
  }, [rightLineX])

  const showDrawer = () => {
    setVisibleDrawer(true)
  }
  const onCloseDrawer = () => {
    setVisibleDrawer(false)
  }
  // 弹窗新建保存
  const onSaveDrawer = () => {
    setTimeout(() => {
      onCloseDrawer()
    }, 50)
  }

  return (
    <div className="gatt-box-root" ref={rootRef}>
      <div className="gatt-box-root-header">
        <div className="gatt-box-root-header-left">
          <Button onClick={showDrawer} type="primary" size="small" icon={<PlusOutlined />}>新建</Button>
          <Button type="primary" size="small">保存</Button>
          <Button type="primary" size="small">批量添加数据</Button>
        </div>
      </div>
      {/* 左边 */}
      <div
      className="gatt-box-root-left"
      style={{ width: rightLineX + 'px' }}>
        {/* 树形表格 */}
        <GattTree fieldsAttr={fieldsAttr} setFieldsAttr={setFieldsAttr} dataArr={dataArr} setDataArr={setDataArr}/>
        {/* 分割线 */}
        <div
          className="gatt-box-root-left-rightLine"
          style={{ left: rightLineX + 'px' }}
          onMouseDown={rightLineMousedown}
          ref={rightLineRef}
        ></div>
      </div>
      {/* 右边 */}
      <div
        className="gatt-box-root-right"
        id="gatt-box-root-right"
        style={{ left: rightLineX + 2 + 'px', width: `${widthRight}px`}}>
        <GattDate startTime={startTime} endTime={endTime} rightLineX={rightLineX} dataArr={dataArr} setDataArr={setDataArr} fieldsAttr={fieldsAttr} widthRight={widthRight}/>
      </div>
      <AddDrawer
        visible={visibleDrawer}
        onClose={onCloseDrawer}
        width={500}
        onSaveDrawer={onSaveDrawer}>
      </AddDrawer>
    </div>
  )
}

export default GattDrag
